import { createComponentInstance, setupComponent } from "./component"
export function render(vnode, container) {
  //patch
  patch(vnode, container)
}

function patch(vnode, container) {
  //处理组件
  //判断vnode 是不是一个elemnt
  console.log(vnode)
  if (typeof vnode.type === 'string') {
    processElement(vnode, container)
  } else {

    processComponent(vnode, container)
  }
}

function processComponent(vnode, container) {
  mountComponent(vnode, container)
}

function mountComponent(vnode, container) {
  const instance = createComponentInstance(vnode)
  setupComponent(instance)
  setupRenderEffect(instance, container)
}

function setupRenderEffect(instance, container) {
  const subTree = instance.render()
  patch(subTree, container)
}

function processElement(vnode, container) {
  mountElement(vnode, container)
}

function mountElement(vnode, container) {
  const el = document.createElement(vnode.type)
  const { children, props } = vnode
  if (typeof children === 'string') {
    console.log(children)
    el.textContent = children
  } else if (Array.isArray(children)) {
    children.forEach(v => {
      patch(v, el)
    })
  }
  for (const key in props) {
    const val = props[key]
    el.setAttribute(key, val)
  }
  //porps
  container.appendChild(el)
}

